<template>
  <div class="UploadFile-container">
    <el-dialog v-bind="$attrs" v-on="$listeners" append-to-body :title="title">
      <template v-if="fileList.length">
        <transition-group
          class="el-upload-list el-upload-list--picture-card"
          tag="ul"
          name="el-list"
        >
          <li
            class="el-upload-list__item is-success"
            v-for="(file, index) in fileList"
            :key="file.fileId"
          >
            <el-image
              :src="define.comUrl + file.url"
              class="el-upload-list__item-thumbnail"
              :preview-src-list="getImgList(fileList)"
              :z-index="10000"
              :ref="'image' + index"
            >
            </el-image>
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(index)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(index)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </transition-group>
      </template>
      <el-upload
        :action="`${define.comUploadUrl}/annexpic`"
        :headers="{ Authorization: $store.getters.token }"
        :file-list="fileList"
        :on-success="handleSuccess"
        :show-file-list="false"
        :multiple="limit !== 1"
        :limit="limit"
        :on-exceed="handleExceed"
        accept="image/*"
        :before-upload="beforeUpload"
        :disabled="disabled"
        list-type="picture-card"
        class="upload-btn"
      >
        <i class="el-icon-plus"></i>
        <div slot="tip" class="el-upload__tip" v-show="showTip">
          只能上传不超过{{ fileSize }}{{ sizeUnit }}的{{ accept }}图片
        </div>
      </el-upload>
      <span slot="footer">
        <el-button @click="$emit('update:visible', false)">取消</el-button>
        <el-button @click="submit" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const units = {
  KB: 1024,
  MB: 1024 * 1024,
  GB: 1024 * 1024 * 1024,
};
export default {
  name: "UploadImgz",
  props: {
    title: {
      type: String,
      default: "上传/预览图片",
    },
    value: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "annexpic",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    showTip: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 0,
    },
    accept: {
      type: String,
      // default: "image/*",
      default: "",
    },
    sizeUnit: {
      type: String,
      default: "MB",
    },
    fileSize: {
      default: 2,
    },
  },
  name: "",
  data() {
    return {
      fileList: this.value,
      uploadList: [], // 自定义的数组，用于处理fileList，fileList是只读的
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.fileList = val;
      },
    },
  },
  created() {},
  methods: {
    submit() {
      this.$emit("update:visible", false);
      this.$emit("updateUpload", this.fileList);
    },
    beforeUpload(file) {
      const unitNum = units[this.sizeUnit];
      if (!this.fileSize) return true;
      let isRightSize = file.size / unitNum < this.fileSize;
      if (!isRightSize) {
        this.$message.error(`文件大小超过${this.fileSize}${this.sizeUnit}`);
      }
      return isRightSize;
    },
    handleSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.fileList.push({
          name: file.name,
          fileId: res.data.name,
          url: res.data.url,
        });
        this.$emit("input", this.fileList);
      } else {
        fileList.filter((o) => o.uid != file.uid);
        this.$emit("input", this.fileList);
        this.$message({ message: res.msg, type: "error", duration: 1500 });
      }
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制最多可以上传${this.limit}张图片`);
    },

    handlePictureCardPreview(index) {
      this.$refs["image" + index][0].clickHandler();
    },

    handleRemove(index) {
      this.fileList.splice(index, 1);
      this.$emit("input", this.fileList);
    },
    getImgList(list) {
      const newList = list.map((o) => this.define.comUrl + o.url);
      return newList;
    },
  },
};
</script>

<style lang='scss' scoped>
>>> .el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  height: 120px;
}
>>> .el-upload--picture-card {
  width: 120px;
  height: 120px;
  line-height: 120px;
}
.upload-btn {
  display: inline-block;
}
</style>